<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import { FormInstance, DateModelType, dayjs } from 'element-plus'
import { OpUnitType } from 'dayjs'
defineProps({
  codeField: {
    type: Object,
    default: () => ({ label: '车辆编号', prop: 'bikeCode' })
  }
})
interface FormType extends Record<string, any> {
  bikeCode: string
  bikeId: string
  startTime: string
  endTime: string
}
const form = defineModel<FormType>({ required: true })

const formRef = ref<FormInstance | null>(null)
/** 时间组件 */
type ModelDateType = string | number | Date | [DateModelType, DateModelType]
type IDatePickerType =
  | 'year'
  | 'month'
  | 'date'
  | 'dates'
  | 'week'
  | 'datetime'
  | 'datetimerange'
  | 'daterange'
  | 'monthrange'
const internalDateRange = ref<ModelDateType>('')
const type = ref('0')
const rangeType = ref<IDatePickerType>('datetimerange')
const datePlaceHolder = ref('请选择时间范围')
const dateFormat = ref('YYYY-MM-DD HH:mm:ss')
watchEffect(() => {
  switch (type.value) {
    case '0':
      rangeType.value = 'datetimerange'
      dateFormat.value = 'YYYY-MM-DD HH:mm:ss'
      internalDateRange.value = ['', '']
      datePlaceHolder.value = '请选择时间范围'
      break
    case '1':
      rangeType.value = 'date'
      dateFormat.value = 'YYYY-MM-DD'
      internalDateRange.value = ''
      datePlaceHolder.value = '请选择日期'
      break
    case '2':
      rangeType.value = 'month'
      dateFormat.value = 'YYYY-MM'
      internalDateRange.value = ''
      datePlaceHolder.value = '请选择月份'
      break
  }
})

const handleDateChange = (value: string[] | string) => {
  if (value && value.length === 2) {
    form.value.startTime = value[0]
    form.value.endTime = value[1]
  } else {
    form.value.startTime = dayjs(value as string)
      .startOf(rangeType.value as OpUnitType)
      .format('YYYY-MM-DD HH:mm:ss')
    form.value.endTime = dayjs(value as string)
      .endOf(rangeType.value as OpUnitType)
      .format('YYYY-MM-DD HH:mm:ss')
  }
}

/** 查询 清空 通知父组件 */
const emits = defineEmits(['submit'])

const hanleSubmit = () => {
  emits('submit', form.value)
}
const reset = () => {
  type.value = '0'
  rangeType.value = 'datetimerange'
  internalDateRange.value = ''
  datePlaceHolder.value = ''
  dateFormat.value = 'YYYY-MM-DD HH:mm:ss'
  form.value.startTime = ''
  form.value.endTime = ''
}
</script>

<template>
  <el-form :model="form" ref="formRef" inline @submit.prevent="hanleSubmit">
    <el-form-item :label="codeField.label" :prop="codeField.prop">
      <el-input v-model="form[codeField.prop]" disabled />
    </el-form-item>
    <el-form-item label="时间">
      <el-select v-model="type" w-100 mr-10>
        <el-option label="自定义" value="0" />
        <el-option label="按日查询" value="1" />
        <el-option label="按月查询" value="2" />
      </el-select>
      <el-date-picker
        v-model="internalDateRange"
        :key="rangeType"
        :type="rangeType"
        value-format="YYYY-MM-DD HH:mm:ss"
        :format="dateFormat"
        range-separator="至"
        start-placeholder="请选择"
        end-placeholder="请选择"
        :placeholder="datePlaceHolder"
        @change="handleDateChange"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="hanleSubmit">查询</el-button>
      <el-button plain @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped></style>
